<template>
  <div class="colorfafafa">
    <titlebox class="mt-60" />
    <div class="container paddingme">
      <div class="box">
        <div class="left">
          <div>
            <img src="../assets/img/logoccc.png" alt="" />
          </div>
          <div class="phone">
            <img src="../assets/img/phoneicon.png" alt="" /><span>15950927000</span>
          </div>
          <!-- <div class="l-b">©2020LaslesVPN</div> -->
        </div>
        <div class="right">
          <div class="one">
            <div class="title">产品</div>
            <div class="item hoverclass" @click="tosasspay">子弹发薪</div>
            <div class="item hoverclass" @click="tosasshelper">子弹企微助手</div>
            <div class="item hoverclass" @click="tosassjob">子弹工作</div>
            <div class="item hoverclass" @click="tosassinsure">工伤保险</div>
          </div>
          <div class="two">
            <div class="title">关于我们</div>
            <div class="item hoverclass" @click="tosasssbout">了解子弹</div>
          </div>
          <div class="three">
            <div class="title">子弹人力云公众号</div>
            <div><img src="../assets/img/ewmccc.png" alt="" /></div>
          </div>
        </div>
      </div>
      <div class="top-line">
        <div class="mb10">
          苏州蓝豚互动信息科技有限公司<span class="ml-mr">|</span
          >地址：江苏省昆山市花桥镇商祥路36号领峰国际1号楼
        </div>
        <div class="mb10">
          苏ICP备2021008677号-1<span class="ml-mr">|</span
          ><span @click="tofwxy" class="pointer">服务协议</span
          ><span class="ml-mr">|</span>
          <span class="pointer" @click="toysxy">隐私协议</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Clipboard from "clipboard";
import titlebox from "~/components/titlebox.vue";
export default {
  components: {
    titlebox,
  },
  data() {
    return {};
  },
  methods: {
    tofwxy() {
      let url = location.href + "serviceAgreement";
      window.open(url);
    },
    toysxy() {
      let url = location.href + "PrivacyAgreement";
      window.open(url);
    },
    tosasssbout() {
      this.$router.push({ path: "/sass-about" });
    },
    tosassjob() {
      this.$router.push({ path: "/sass-job" });
    },
    tosasshelper() {
      this.$router.push({ path: "/sass-helper" });
    },
    tosasspay() {
      this.$router.push({ path: "/sass-pay" });
    },
    tosassinsure() {
      this.$router.push({ path: "/sass-insurance" });
    },
    copy() {
      console.log(11111);
      var clipboard = new Clipboard(".tag-read");
      clipboard.on("success", (e) => {
        console.log("复制成功");
        this.msgflag = true;
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        console.log("该浏览器不支持自动复制");
        this.$message({
          message: "该浏览器不支持自动复制",
          type: "success",
        });
        // alert("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.paddingme {
  padding-bottom: 200px;
  padding-top: 210px;
}

.right {
  display: flex;
  justify-content: space-between;

  .one {
    margin-right: 107px;

    .title {
      font-size: 18px;
      color: #202536;
      margin-bottom: 30px;
    }

    .item {
      color: #565868;
      font-size: 16px;
      margin-bottom: 24px;
      cursor: pointer;
    }
  }

  .two {
    margin-right: 188px;

    .title {
      font-size: 18px;
      color: #202536;
      margin-bottom: 30px;
    }

    .item {
      color: #565868;
      font-size: 16px;
      margin-bottom: 24px;
      cursor: pointer;
    }
  }

  .three {
    img {
      width: 110px;
      height: 110px;
    }

    .title {
      font-size: 14px;
      color: #202536;
      margin-bottom: 16px;
    }
  }
}

.box {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;

  .left {
    img {
      width: 143px;
      height: 30px;
    }

    .l-b {
      margin-top: 110px;
      font-size: 21px;
      color: #9497b1;
    }

    .phone {
      width: 155px;
      height: 36px;
      margin-top: 30px;
      background-color: #3e5ff5;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #ffffff;

      img {
        width: 27px;
        height: 27px;
      }
    }
  }
}
.hoverclass:hover {
  color: #3e5ff5 !important;
}
.colorfafafa {
  position: relative;
  background-color: #fafafc;
}
.mt-60 {
  position: absolute;
  left: 50%;
  top: -116px;
  transform: translate(-50%, 0);
}
.top-line {
  padding-top: 40px;
  width: 100%;
  height: 10px;
  border-top: 1px solid #eaeaef;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 14px;
}
.mb10 {
  margin-bottom: 10px;
  color: #9497b1;
}
.ml-mr {
  margin-left: 20px;
  margin-right: 20px;
  display: inline-block;
}
.pointer {
  cursor: pointer;
}
.pointer:hover {
  color: #3e5ff5;
}
</style>
